<template>
	<div class="user-container" :class="{ explore: category != 'pure' }" ref="userPanel">
		<div class="user-avatar"></div>
		<div class="user-right" ref="userprompt" v-if="!isEdit">
			{{ message.content }}
			<div v-if="category != 'pure'" class="tool_panel" ref="toolPanel" :class="{ half: isHalf }">
				<div @click="editPrompt" v-if="currentIndex == index">
					<Edit width="1.33rem" height="1.33rem" title="编辑"></Edit>
				</div>
				<div :class="'copybtn' + index">
					<FuZhiV1 width="1.33rem" height="1.33rem" title="复制"></FuZhiV1>
				</div>
				<div @click="deletePrompt">
					<Delete width="2.33rem" height="2.33rem" title="删除"></Delete>
				</div>
			</div>
		</div>
		<div v-else class="editPrompt">
			<Input v-model="editTxt" />
			<Icon type="ios-close" @click="cancel" size="16" />
			<Icon type="ios-checkmark" @click="savePrompt" size="16" />
		</div>
	</div>
</template>
<script>
import FuZhiV1 from '@/components/svg/v1/fuzhi.vue'
import Edit from '@/components/svg/v1/edit.vue'
import Delete from '@/components/svg/v1/delete.vue'
import Clipboard from 'clipboard'
export default {
	props: {
		message: {
			type: Object,
			default: () => {
				return {
					content: ''
				}
			}
		},
		category: {
			type: String,
			default: 'pure'
		},
		index: {
			type: Number,
			default: 0
		},
		currentIndex: {
			type: Number,
			default: 0
		}
	},
	components: {
		FuZhiV1,
		Edit,
		Delete
	},
	data() {
		return {
			clipboard: null,
			isHalf: false,
			isEdit: false,
			editTxt: ''
		}
	},

	methods: {
		editPrompt() {
			this.editTxt = this.message.content
			this.isEdit = true
		},
		async savePrompt() {
			this.$set(this.message, 'content', this.editTxt)
			await chrome.webview.hostObjects.chatHelper.EditPromptAsync(this.message.id, this.editTxt)
			this.$emit('on-edit', this.editTxt)
			this.isEdit = false
		},
		cancel() {
			this.isEdit = false
		},
		deletePrompt() {
			this.$Modal.confirm({
				title: '警告',
				content: `将同时删除输入提示和输出补全，请确认是否删除？`,
				onOk: () => {
					this.$emit('on-delete', this.message.id)
				}
			})
		}
	},

	mounted() {
		let self = this
		if (this.$refs.userprompt.offsetWidth < this.$refs.userPanel.offsetWidth / 2) {
			this.isHalf = true
		}
		let clipboard = new Clipboard('.copybtn' + self.index, {
			// target: function (trigger) {
			// 	return self.$refs.robotAns
			// }
			text: function (trigger) {
				return self.message.content
			}
		})
		clipboard.on('success', function (e) {
			self.$Message.success({
				content: '复制成功'
			})
			e.clearSelection()
		})

		clipboard.on('error', function (e) {
			console.log(e)
			self.$Message.error({
				content: '复制失败'
			})
		})
		this.clipboard = clipboard
	},
	destroyed() {
		this.clipboard.destroy()
	}
}
</script>

<style lang="less" scoped>
.user-container {
	display: flex;
	justify-content: flex-end;
	margin-bottom: 1.5rem;
	.user-right {
		background-image: linear-gradient(133deg, #fceed4 0%, #fcd9a2 100%);
		border-radius: 1rem 1rem 0rem 1rem;
		margin-left: auto;
		font-family: PingFangSC-Regular;
		font-size: 1.13rem;
		color: #333333;
		letter-spacing: 0;
		font-weight: 400;
		padding: 1rem 1rem;
		position: relative;
		word-break: break-all;
		.tool_panel {
			display: flex;
			align-items: center;
			background: var(--chat-tool-bg);
			box-shadow: 0rem 0rem 0.42rem 0rem var(--chat-tool-shadow);
			border-radius: 1rem;
			height: 3rem;
			padding-left: 1rem;
			position: absolute;
			right: 1.58rem;
			bottom: -1.33rem;
			opacity: 0;
			div {
				margin-right: 1rem;
				cursor: pointer;
				display: flex;
				align-items: center;
			}
		}
		.tool_panel.half {
			right: -5rem;
		}
	}
	.editPrompt {
		display: flex;
		align-items: center;
		height: 4.6rem;
		width: calc(100vw - 28rem);
		i {
			color: var(--chat-input-color);
		}
	}
	.user-right:hover {
		.tool_panel {
			opacity: 1;
		}
	}
}
.explore {
	justify-content: flex-start;
	.user-right {
		margin-left: 0;
		border-radius: 1rem 1rem 1rem 0rem;
		padding: 1rem;
	}
}
</style>
